<div class="sheet-info wrap feature-wrap">
  <div class="g-wrap6">
    <div class="m-info clearfix">
      <div class="cover">
        <img appImgDefault [src]="sheetInfo.coverImgUrl" [alt]="sheetInfo.name" />
        <div class="mask"></div>
      </div>
      <div class="cnt">
        <div class="cntc">
          <div class="hd clearfix">
            <i class="f-pr"></i>
            <div class="tit">
              <h2 class="f-ff2 f-brk">{{sheetInfo.name}}</h2>
            </div>
          </div>
          <div class="user f-cb">
            <a class="face" [hidden]="!sheetInfo.creator"  [href]="'https://music.163.com/artist?id=' + sheetInfo.userId" target="_blank">
              <img appImgDefault [src]="sheetInfo.creator?.avatarUrl" [alt]="sheetInfo.creator?.nickname" />
            </a>
            <span class="name">
              <a
                [href]="'https://music.163.com/artist?id=' + sheetInfo.userId"
                class="s-fc2"
                target="_blank"
              >
                {{sheetInfo.creator?.nickname}}
              </a>
            </span>
            <span class="time s-fc4">
              {{sheetInfo.createTime | date: 'yyyy-MM-dd'}} 创建
            </span>
          </div>
          <div class="btns">
            <nz-button-group class="btn">
              <button
                class="play"
                nz-button
                nzType="primary"
                (click)="onAddSongList(sheetInfo.tracks, true)"
              >
                <i nz-icon nzType="play-circle" nzTheme="outline"></i>播放
              </button>
              <button class="add" nz-button nzType="primary" (click)="onAddSongList(sheetInfo.tracks)">
              +</button>
            </nz-button-group>
            <button class="btn-like" nz-button [disabled]="sheetInfo.subscribed" (click)="onLikeSongSheet(sheetInfo.id.toString())">
              <span>收藏</span>{{sheetInfo.subscribedCount}}
            </button>&nbsp;
            <button class="btn-share" nz-button (click)="onShare(sheetInfo, 'playlist')">
              <span>分享</span>{{sheetInfo.shareCount}}
            </button>
          </div>
          <div class="tags clearfix">
            <span *ngIf="sheetInfo.tags?.length">标签：</span>
            <div class="tag-wrap">
              <nz-tag *ngFor="let tag of sheetInfo.tags">{{tag}}</nz-tag>
            </div>
          </div>
          <div class="intr f-brk" [class.f-hide]="controlDesc.isExpand">
            <p [innerHTML]="description.short"></p>
          </div>
          <div class="intr f-brk" [class.f-hide]="!controlDesc.isExpand">
            <p [innerHTML]="description.long"></p>
          </div>
          <div class="expand" *ngIf="description.long" (click)="toggleDesc()">
            <span>{{controlDesc.label}}</span>
            <i nz-icon [nzType]="controlDesc.iconCls" nzTheme="outline" [ngStyle]="{color: '#1890ff'}"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="wy-sec">
      <div class="u-title wy-sec-wrap clearfix">
        <h3 class="wy-sec-tit">
          <span class="f-ff2">歌曲列表</span>
        </h3>
        <span class="sub s-fc3">
          {{sheetInfo.tracks.length}}首歌
        </span>
        <div class="more s-fc3">
          播放：
          <strong class="s-fc6">{{sheetInfo.playCount}}</strong>
          次
        </div>
      </div>
      <nz-table
        class="wy-table"
        #basicTable
        [nzData]="sheetInfo.tracks"
        [nzFrontPagination]="false"
        nzBordered
        nzNoResult="音乐列表为空！"
      >
        <thead>
          <tr>
            <th nzWidth="80px"></th>
            <th>标题</th>
            <th nzWidth="120px">时长</th>
            <th nzWidth="80px">歌手</th>
            <th>专辑</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of basicTable.data; index as i;">
            <td class="first-col">
              <span>{{i + 1}}</span>
              <i
                class="ico play-song"
                [class.current]="currentIndex === i"
                title="播放"
                (click)="onAddSong(item, true)"></i>
            </td>
            <td class="song-name">
              <a [routerLink]="['/songInfo', item.id]">{{item.name}}</a>
            </td>
            <td class="time-col">
              <span>{{(item.dt / 1000) | formatTime}}</span>
              <p class="icons">
                <i class="ico add" title="添加" (click)="onAddSong(item)"></i>
                <i class="ico like" title="收藏" (click)="onLikeSong(item.id.toString())"></i>
                <i class="ico share" title="分享" (click)="onShare(item)"></i>
              </p>
            </td>
            <td>
              <ng-container *ngFor="let singer of item.ar; last as isLast;">
                <a (click)="skipToSinger('/singer', singer.id.toString())">{{singer.name}}</a>
                <em [hidden]="isLast">/</em>
              </ng-container>
            </td>
            <td>{{item.al.name}}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>
